<template>
	<div class="ac-records">
		<table class="record-table" id="tableBody">
			<tr>
				<th>出入时间</th>
				<!-- <th>出入</th> -->
				<th>门禁名称</th>
			</tr>
			<tr v-for="(item, index) in tableData" :key="index">
				<td>{{item.accessTime}}</td>
				<!-- <td>{{item.account}}</td> -->
				<td>{{item.deviceName}}</td>
			</tr>
		</table>
		<uni-load-more :status="more"></uni-load-more>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import { pageAccessLog } from '@/api/manageApi'
export default {
	data() {
		return {
			page: 1,
			limit: 15,
			totalPage: 1,
			tableData: [
        // {number: 8888881, account: '888****88', award: 888888888 }
      ],
			more: 'more'
		}
	},
	computed: {
		...mapGetters(['userInfo', 'uniToken'])
	},
	//下拉刷新
	onPullDownRefresh () {
		this.page = 1
		this.handleList()
	},
	//上拉加载
	onReachBottom () {
		if(this.page < this.totalPage){
			this.page++
			this.handleList()
		}
	},
	onLoad() {
		this.page = 1
		this.handleList()
	},
	methods: {
		// 列表接口
    handleList () {
      var params = {
				"current": this.page,
				"ext": {},
				"orders": [
					{
						"order": "desc",
						"sort": "createTime"
					}
				],
				"size": this.limit,
				"userId": this.userInfo.userId
			}
      pageAccessLog(params).then(res => {
        // console.log(res)
				if (res.code == '200') {
					var data = res.data.records
					this.more = 'more'
					if (this.page == 1) {
						this.totalPage = Math.ceil(parseInt(res.data.total)/this.limit)
						this.tableData = data
						uni.stopPullDownRefresh()
					} else {
						this.tableData = this.tableData.concat(data)
					}
					if (this.page >= this.totalPage) {
						this.more = 'noMore'
					}
				}
      })
    }
	}
}
</script>

<style lang="scss">
.ac-records {
	background: #fff;
	.record-table{
		width: 100%;
		text-align: center;
		table-layout: fixed;
		empty-cells: show;
		border-collapse: collapse;
		font-size: 28rpx;
		color: #575757;
	}
	.record-table tr{
		display: flex;
	}
	.record-table tr th{
		height: 76rpx;
		line-height: 76rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		background: #FF5D3D;
		font-size: 28rpx;
		color: #FFFFFF;
		font-weight: 400;
		width: 50%;
	}
	.record-table tr td{
		height: 76rpx;
		line-height: 76rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 50%;
	}
	.record-table tr:nth-child(odd){
		background: #fff;
	}
	.record-table tr:nth-child(even){
		background: #FFF3EB;
	}
}
</style>
